<template>
  <div class="h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard title="质量报告" :bordered="false" size="small" class="card-wrapper">
      <!-- 查询条件 -->
      <NSpace :size="16" class="mb-4">
        <NInput v-model:value="searchParams.tableName" placeholder="请输入表名" style="width: 200px" clearable />
        <NDatePicker
          v-model:value="dateRange"
          type="daterange"
          clearable
          style="width: 300px"
          @update:value="handleDateChange"
        />
        <NButton type="primary" @click="handleSearch">查询</NButton>
        <NButton @click="handleReset">重置</NButton>
      </NSpace>

      <!-- 报告列表 -->
      <NDataTable
        :columns="columns"
        :data="dataSource"
        size="small"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="mb-4"
      />
    </NCard>

    <!-- 质量报告详情抽屉 -->
    <QualityReportDrawer v-model:visible="drawerVisible" :report-id="currentReportId" />
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { NButton, NSpace, NTag } from 'naive-ui';
import { fetchQualityReportList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { useTable } from '@/hooks/common/table';
import QualityReportDrawer from './modules/quality-report-drawer.vue';

const appStore = useAppStore();

const drawerVisible = ref(false);
const currentReportId = ref<number>(0);
const dateRange = ref<[number, number] | null>(null);

const searchParams = reactive({
  tableName: '',
  startDate: null,
  endDate: null
});

const { columns, data, getData, loading, mobilePagination } = useTable({
  apiFn: fetchQualityReportList,
  apiParams: {
    pageNum: 1,
    pageSize: 10,
    ...searchParams
  },
  columns: () => [
    {
      key: 'id',
      title: 'ID',
      align: 'center',
      width: 80
    },
    {
      key: 'tableName',
      title: '表名',
      align: 'center',
      minWidth: 150
    },
    {
      key: 'totalCount',
      title: '总记录数',
      align: 'center',
      width: 120
    },
    {
      key: 'problemCount',
      title: '问题记录数',
      align: 'center',
      width: 120
    },
    {
      key: 'qualityScore',
      title: '质量评分',
      align: 'center',
      width: 100,
      render: row => {
        const score = row.qualityScore || 0;
        let type: any = 'success';
        if (score < 60) type = 'error';
        else if (score < 80) type = 'warning';
        return <NTag type={type}>{score.toFixed(2)}</NTag>;
      }
    },
    {
      key: 'checkTime',
      title: '检查时间',
      align: 'center',
      width: 180
    },
    {
      key: 'operate',
      title: '操作',
      align: 'center',
      width: 100,
      fixed: 'right',
      render: row => {
        return (
          <NButton size={'small'} type="primary" onClick={() => handleViewDetail(row.id)}>
            查看详情
          </NButton>
        );
      }
    }
  ]
});

function handleDateChange(value: [number, number] | null) {
  if (value) {
    searchParams.startDate = new Date(value[0]).toISOString().split('T')[0];
    searchParams.endDate = new Date(value[1]).toISOString().split('T')[0];
  } else {
    searchParams.startDate = null;
    searchParams.endDate = null;
  }
}

function handleSearch() {
  getData();
}

function handleReset() {
  searchParams.tableName = '';
  searchParams.startDate = null;
  searchParams.endDate = null;
  dateRange.value = null;
  getData();
}

function handleViewDetail(id: number) {
  currentReportId.value = id;
  drawerVisible.value = true;
}

const dataSource = data;
</script>

<style scoped></style>
